
<div class="col-sm-10">

    <div class="page-header" style="margin-top: 10px;
    margin-bottom: 5px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: 15px;">
        <h2 style="margin: 0px">权限管理 / 用户管理</h2>
    </div>

    <!--用户处理框-->
    <div class="panel panel-default">
        <div class="panel-body">

            <!--搜索栏-->
            <div class="navbar-collapse" id="bs-example-navbar-collapse-1">
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <div class="navbar-header" style="width: 98%;">
                            <form class="navbar-form navbar-left" style="width: 98%;">
                                <div class="form-group">
                                    搜索：
                                    <input id="search_input" type="text" class="form-control" placeholder="Search">
                                    <button class="btn btn-default" type="button" id="search_btn">查询</button>
                                </div>
                                <div class="form-group" style="float: right;">
                                    <button class="btn btn-success" type="button" id="user_add_btn">添加用户</button>
                                    <button class="btn btn-danger" type="button" id="multiple_delete_btn">多选删除</button>
<!--                                    <button class="btn" type="button" id="test1Btn">测试按钮1</button>-->
                                </div>
                            </form>
                        </div>
                    </div>
                </nav>
            </div>

            <div class="navbar-collapse" id="bs-example-navbar-collapse-2">

                <!--表格-->
<!--                用于显示用户信息的表格-->
                <table id="user_curd_table" class="table table-hover table-bordered table-striped"
                       data-id-field="id"
                       data-pagination="true"
                       data-side-pagination="server"
                       data-page-size="10"
                       data-page-list="[10, 20]"
                       data-unique-id="id">
                </table>

            </div>
        </div>

    </div>
</div>

<!--添加/修改用户对话框-->
<div class="modal fade" id="user_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">添加用户信息</h4>
            </div>
            <div class="modal-body">

                <form id="add_user_form" class="form-horizontal">
                    <div class="form-group" style="display:none">
                        <label class="col-sm-2 control-label">ID</label>
                        <div class="col-sm-10">
                            <input type="text" name="id" class="form-control" id="id_input" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <!-- placeholder是显示输入提示的属性 -->
                            <!-- name属性的值与实体类的属性名相同是为了能自动进行类对象的实例化 -->
                            <input type="text" name="username" class="form-control" id="username_input"
                                   placeholder="用户名(6-20位的英文字符或数字)">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">昵称</label>
                        <div class="col-sm-10">
                            <input type="text" name="nickname" class="form-control" id="nickname_input"
                                   placeholder="昵称(4-10位的字符)">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" name="password" class="form-control" id="password_input"
                                   placeholder="密码(6-20位的英文字符或数字)">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="email" name="email" class="form-control" id="email_input"
                                   placeholder="邮箱(example@xx.com)">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">拥有角色</label>
                        <div class="col-sm-10">
                            <select id="user_modal_role_select" name="roleIdList"
                                    class="selectpicker show-tick form-control" multiple data-live-search="false"
                                    title="没有选中任何角色">
                            </select>
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" id="user_cancel" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="user_confirm" class="btn btn-primary">确认</button>
            </div>
        </div>
    </div>
</div>

<!-- 该模态框用于删除用户 -->
<div class="modal fade" id="delete_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <!-- 模态框标题 -->
                <h4 class="modal-title">删除用户</h4>
            </div>
            <div class="modal-body">
                <p id="delete_tip_p">模态框内容</p>
                <p id="delete_id_p" style="visibility: hidden"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="delete_user_btn" class="btn btn-danger">确认</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    //定义一些页面变量
    var totalRecords;
    var nowPage;
    var roleList;//数据库里的全部角色信息
    var allUsersOwnRolesIdList;//所有的用户拥有角色的Id列表的列表(二维数组)
    var allUsersList;//所有的用户列表(对象数组)

    var selectedObjects = [];//被选中的用户对象们

    var errInputClass = "has-error";
    var to_page_finish = true;
    var bindOnEvent_finish = true;

    //加载页面后进行的操作
    $(function () {
        startWaiting();
        //初始化用户表
        initUserTable();
        //发送跳转请求到用户表第1页
        to_page(1);
        //绑定按钮点击事件
        bindOnEvent();
        checkIsFinish();
    });

    /**
     * 该方法用于开始等待页面数据填充
     */
    function startWaiting() {
        //弹出等待模态框
        $('#wait_modal').modal({
            show: true,
            backdrop: 'static'
        });
    }

    /**
     * 该方法用于循环等待并判断是否已结束了页面加载，若是则结束，若否则继续等待
     */
    function checkIsFinish() {
        let intervalID = setInterval(function () {
            console.log("持续等待页面加载...");
            // let to_page_finish = (sessionStorage.getItem("to_page_finish") === "true");
            // let bindOnEvent_finish = (sessionStorage.getItem("bindOnEvent_finish") === "true");
            if (to_page_finish && bindOnEvent_finish) {//如果可以结束，则结束
                console.log("页面加载完成!");
                // sessionStorage.removeItem("to_page_finish");
                // sessionStorage.removeItem("bindOnEvent_finish");
                //关闭等待模态框
                $('#wait_modal').modal('hide');
                clearInterval(intervalID);//结束循环
            }
        }, 200);
    }

    /**
     * 该方法用于跳转到页面（并不构建表格）
     */
    function to_page(pn) {
        let options = $("#user_curd_table").bootstrapTable('getOptions');
        let pageSize = options.pageSize;

        $.ajax({//请求全部角色
            url: getAllRoleInterface,
            type: "GET",
            beforeSend: function(XMLHttpRequest ) {
                //在请求头部设置accessToken
                XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
            },
            async: false,//async设置为false可以使请求成为同步模式
            //请求成功后的回调函数
            //result是请求成功后返回的Json结果
            success: function (result) {
                roleList = result.dataMap.roleList;
            }
        });

        //构建模态框里的下拉选框
        let $userModalRoleSelect = $("#user_modal_role_select");
        $userModalRoleSelect.empty();//构建前先清空
        $userModalRoleSelect.selectpicker({
            'selectedText': 'cat'
        });
        $.each(roleList, function (index, item) {
            let $resourceOp = $("<option></option>").append(item.role_name).attr("value", item.id);//创建选项框
            $userModalRoleSelect.append($resourceOp);//加入选项框
        });
        //不刷新则无法显示
        // $userModalRoleSelect.selectpicker('refresh');
        // $userModalRoleSelect.selectpicker('render');
        $(".selectpicker").selectpicker('refresh');
        $(".selectpicker").selectpicker('render');

        //每次刷新页面，都要刷新当前页面的角色列表
        allUsersList = [];
        allUsersOwnRolesIdList = [];

        //获取用户和他拥有的角色
        $.ajax({
            url: userWithRoleInterface,
            data: {
                pn: pn,
                size: pageSize,
                search: $("#search_input").val()
            },
            type: "GET",
            beforeSend: function(XMLHttpRequest ) {
                //在请求头部设置accessToken
                XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
            },
            //请求成功后的回调函数
            //result是请求成功后返回的Json结果
            success: function (result) {
                //给表格装载数据
                loadTableData(result.dataMap.pageInfo);
                //刷新当前页面角色列表
                allUsersList = result.dataMap.pageInfo.list;
                //由于在formatter方法里勾选失败，所以只能在to_page之后继续进行勾选
                //给修改模态框进行默认勾选
                let i = 0;
                $(".row-select").each(function (i) {
                    let nowRoleIdList = getAttributeArray(allUsersList[i].roleList,"id");
                    $(this).val(nowRoleIdList);
                    i++;
                });

                //初始化每一行的角色信息的selectpicker
                $(".row-select").selectpicker({
                    'selectedText': 'cat',
                    width: 350//给它设定初始宽度
                });
                //不刷新则无法显示
                $(".selectpicker").selectpicker('refresh');
                $(".selectpicker").selectpicker('render');

                //获取选中项目并让表选中
                let nowSelections = getAttributeArray(selectedObjects, "id");
                $("#user_curd_table").bootstrapTable('checkBy', {field: 'id', values: nowSelections});
            }
        });

    }

    /**
     * 该方法用于构建 用户-角色 bootstrap表（不加载数据）
     */
    function initUserTable() {
        let $table = $("#user_curd_table");
        //构造 部门bootstrap-table表
        $table.bootstrapTable({
            // height: 617,
            //该函数用于设定行样式
            // rowStyle: function (value, row, index) {
            //     return {
            //         classes: "department_row"
            //     }
            // },
            columns: [
                {
                    checkbox: true,
                    field: 'state',
                    title: '选择',
                    valign: 'middle'//居中
                },
                {
                    field: 'id',
                    title: '用户id',
                    width: 80
                    // sortable: true,
                    // align: 'center'
                },
                {
                    field: 'username',
                    title: '用户名',
                    width: 100
                },
                {
                    field: 'nickname',
                    title: '昵称',
                    width: 100
                },
                {
                    field: 'email',
                    title: '邮箱'
                },
                {
                    field: 'roleList',
                    title: '拥有角色',
                    clickToSelect: false,
                    width: 400,
                    //该函数用于设定该格子细节
                    formatter: function (value, row, index) {
                        let nowRoles = value;//该用户目前拥有的角色
                        let nowRoleIdList = [];//该用户目前拥有的角色ID列表
                        $.each(nowRoles, function (index, item) {
                            nowRoleIdList.push(item.id);
                        });

                        let $roleSelect = $("<select></select>")
                            .addClass("selectpicker show-tick row-select")
                            .attr("multiple", "")
                            .attr("title", "未拥有任何角色")
                            .attr("data-selected-text-format", "count > 4")//最多显示4个角色
                            .attr("data-count-selected-text", "拥有{0}个角色(点击查看详情)")
                            .attr("data-live-search", "false");

                        $.each(roleList, function (index, item) {
                            let $roleOp = $("<option></option>")
                                .addClass("role_option")//加入一个识别用的框
                                .append(item.role_name)
                                .attr("disabled", "")//禁用选中
                                .attr("value", item.id);//创建选项框
                            $roleSelect.append($roleOp);//加入选项框
                        });
                        allUsersOwnRolesIdList.push(nowRoleIdList);
                        $roleSelect.val(nowRoleIdList);//给修改模态框进行默认勾选

                        return $roleSelect[0].outerHTML;
                    }
                },
                {
                    field: 'operate',
                    title: '操作',
                    clickToSelect: false,
                    width: 130,
                    //该函数用于设定该格子细节
                    formatter: function (value, row, index) {
                        let $updateBtn = $("<button class=\"btn btn-primary btn-sm update_user_btn\" style='margin-right:10px;margin-top:3px;'>编辑</button>").val(row.id);
                        let $deleteBtn = $("<button class=\"btn btn-danger btn-sm delete_user_btn\" style='margin-right:10px;margin-top:3px;'>删除</button>").val(row.id);
                        return $updateBtn[0].outerHTML + $deleteBtn[0].outerHTML;
                    }
                }
            ],
            clickToSelect: true,//点击该行进行选中
            formatRecordsPerPage: function (pageNumber) {
                return '页显示量:' + pageNumber;
            },
            formatShowingRows: function (pageFrom, pageTo, totalRows) {
                let pageSize = $("#user_curd_table").bootstrapTable('getOptions').pageSize;
                return '当前页:' + (Math.ceil(pageFrom / pageSize)) + ' &nbsp;总页数:' + (Math.ceil(totalRows / pageSize)) + ' &nbsp;总数据量:' + totalRows;
            },
            formatLoadingMessage: function () {
                return '加载中,请稍后...';
            },
            formatNoMatches: function () {
                return '找不到匹配的用户信息';
            }
        });
    }

    /**
     * 该函数用于将数组集合set1与set2合并，<br>
     * 判断相同的条件为数组集合内对象的Id数值是否相等，<br>
     * 返回的集合里的内容会被新集合给更新<br>
     * 参数：set1为旧集合，set2为新集合<br>
     * 返回值：新的数组并集
     */
    function union(set1, set2) {
        //判断set1 2是否为集合，否则转换
        set1 = Array.isArray(set1) ? set1 : [set1];
        set2 = Array.isArray(set2) ? set2 : [set2];
        let set = set1.concat(set2);
        let resultSet = [];//要返回的超集
        let mapObject = {};//用于验证数组里对象是否已被存储的对象
        for (let i = 0; i < set.length; i++) {
            //如果mapObject里item.id不存在
            if (!(set[i].id in mapObject)) {//则该项添加进超集
                resultSet.push(set[i]);
                mapObject[set[i].id] = i;//设置好索引后下次不会再重复添加，且能用于更新
            } else {//否则该项去更新
                let oldIndex = mapObject[set[i].id];//取出存储的旧对象索引
                resultSet[oldIndex] = set[i];//旧对象更新为新对象
            }
        }
        return resultSet;
    }

    /**
     * 该函数用于将数组集合set1与set2做差集运算，<br>
     * 判断相同的条件为数组集合内对象的Id数值是否相等<br>
     * 参数：set1为被减集合，set2为减集合<br>
     * 返回值：新的已差集运算的数组集合
     */
    function difference(set1, set2) {
        //判断set1 2是否为数组，否则转换
        set1 = Array.isArray(set1) ? set1 : [set1];
        set2 = Array.isArray(set2) ? set2 : [set2];
        let set2Ids = getAttributeArray(set2, "id");

        let resultSet = set1.filter(function (item) {
            //set1里的id是否在set2中，若存在则为true，不存在则为false
            let isIdExist = (set2Ids.indexOf(item.id) !== -1);
            //返回值里true为保留，false为不保留
            return !isIdExist;
        });
        return resultSet;
    }

    /**
     * 该函数用于将数组中的属性值取出并生成数组<br>
     * 参数：array为原数组，attribute为数组里对象属性字符串<br>
     * 返回值：生成的属性数组
     */
    function getAttributeArray(array, attribute) {
        let list = $.map(array, function (item) {
            return item[attribute];
        });
        return list;
    }

    /**
     * 该方法用于给表格加载数据
     */
    function loadTableData(pageInfo) {
        let tableData = {};
        totalRecords = pageInfo.total;

        tableData["total"] = pageInfo.total;
        tableData["totalNotFiltered"] = pageInfo.total;
        tableData["rows"] = pageInfo.list;

        //重载数据
        $("#user_curd_table").bootstrapTable('removeAll');
        $("#user_curd_table").bootstrapTable('load', tableData);
        // $("#position_curd_table").bootstrapTable('expandAllRows');
    }


    /**
     * 该方法用于给模态框加载数据
     */
    function loadModalData(jsonData) {
        //装载数据
        for (let key in jsonData) {
            if (key == "roleList") {
                //给修改模态框进行默认勾选
                let roleIdList = [];
                let nowRoleList = jsonData[key];
                $.each(nowRoleList,function (index, item) {
                    roleIdList.push(item.id);
                });
                $("#user_modal select").val(roleIdList).selectpicker('refresh');//给修改模态框进行默认勾选;
                continue;
            }
            $("#user_modal form").find("input[name='" + key + "']").val(jsonData[key]);
        }
    }

    /**
     * 该方法用于获取模态框里的数据<br>
     * 返回值：一个模态框数据的json对象
     */
    function getModalData() {
        let $userModal = $("#user_modal");
        let inputs = $userModal.find("input");
        let selects = $userModal.find("select");

        let userJSONdata = {};
        $.each(inputs, function (index, item) {
            userJSONdata[item.name] = $(item).val();
        });
        $.each(selects, function (index, item) {
            userJSONdata[item.name] = $(item).val();
        });
        for (var key in userJSONdata) {//清除空的属性
            if (userJSONdata[key] == "" || key == "") {//如果键和值为""才清理，不然不用清理
                delete userJSONdata[key];
            }
        }

        return userJSONdata;
    }

    /**
     * 该方法用于获取该行按钮所在行的数据<br>
     * 参数: buttonThis 为一个按钮的this指针<br>
     * 返回值：该行按钮所在行的JSON形式数据对象
     */
    function getThisRowJsonData(buttonThis) {
        let userID = $(buttonThis).val();
        //使用jq和getRowByUniqueId api来获取那一行的数据
        let userJSONdata = $("#user_curd_table")//该按钮的祖先标签中的sub_position_table子职位表里面才是需要的表
            .bootstrapTable('getRowByUniqueId', userID);
        return userJSONdata;
    }

    /**
     * 该方法用于给控件下方的单个位置显示错误
     * @param errorMap为带有错误的map对象
     */
    function showAllErrors(errorMap) {
        //显示所有错误前需清空前面的错误
        clearAllErrors();
        $("#user_confirm").attr("disabled","");
        //遍历所有的错误，并显示出来
        for (let errorName in errorMap) {
            showSingleError(errorName, errorMap[errorName]);
        }
    }

    /**
     * 该方法用于给控件下方的单个位置显示错误
     */
    function showSingleError(selectorName, errorMsg) {
        //添加错误显示并添加错误信息
        $("input[name='" + selectorName + "'],select[name='" + selectorName + "']").parents(".form-group").addClass("has-error");
        $("input[name='" + selectorName + "'],select[name='" + selectorName + "']").parent().parent().find("span.help-block").append(errorMsg);
    }

    /**
     * 该方法用于给所有控件下方的位置清除错误
     */
    function clearAllErrors() {
        $("#user_confirm").removeAttr("disabled");
        $("input,select").parents().removeClass("has-error");
        $("input,select").parent().parent().find("span.help-block").empty();
    }

    /**
     * 该方法用于给控件绑定事件
     */
    function bindOnEvent() {
        bindOnEvent_finish = false;
        //搜索按钮的点击事件
        $('#search_btn').off("click").click(function () {
            to_page(1);//搜索时默认只能跳到第1页
        });

        //绑定测试的按钮的点击事件
        $('#test1Btn').off("click").click(function () {
            alertUtil.message("测试完成");
            // $("#user_curd_table").bootstrapTable('checkBy', {field: 'id', values: [1]});
            //获取选中项目并让表选中
            // let nowSelections = getAttributeArray(selectedObjects, "id");
            // $("#user_curd_table").bootstrapTable('checkBy', {field: 'id', values: nowSelections});
        });

        //绑定弹出添加用户模态框按钮的点击事件
        $('#user_add_btn').off("click").click(function () {
            //清除错误提示
            clearAllErrors();
            //去掉标识用的类，再增加标识用的类
            $("#user_confirm").removeClass("user_add_confirm_btn user_update_confirm_btn").addClass("user_add_confirm_btn");
            //提示增加用户信息
            $("#user_modal .modal-title").empty().text("添加用户信息");
            //将用户名那一项启用
            $("#user_modal input[name='username']").removeAttr("disabled","");
            //禁用提交按钮
            $("#user_confirm").attr("disabled","");
            //调用html元素的清除表单数据方法
            $("#user_modal form")[0].reset();
            //取消所有选中
            $("#user_modal select").selectpicker('deselectAll');
            //弹出模态框
            $('#user_modal').modal({
                backdrop: 'static'
            });
        });

        //各种选中事件
        $("#user_curd_table").on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table',
            function (e, rowsAfter, rowsBefore) {
                //选中的行的数据
                rowsAfter = !$.isArray(rowsAfter) ? [rowsAfter] : rowsAfter;
                rowsBefore = !$.isArray(rowsBefore) ? [rowsBefore] : rowsBefore;

                //如果事件类型为选中
                if (e.type === 'check-all' || e.type === 'check') {
                    selectedObjects = union(selectedObjects,rowsAfter);
                }
                //如果事件类型为反选
                if (e.type === 'uncheck') {
                    selectedObjects = difference(selectedObjects,rowsAfter);
                }
                //如果事件类型为全反选
                if (e.type === 'uncheck-all') {
                    selectedObjects = difference(selectedObjects,rowsBefore);
                }
        });


        //给各输入框添加焦点模糊事件
        $(document).off("input propertychange", "#user_modal input")
            .on("input propertychange", "#user_modal input",
                function () {
                    let userData = getModalData();
                    let userJsonData = JSON.stringify(userData);

                    //增加用户的情况
                    if ($("#user_confirm").hasClass("user_add_confirm_btn")) {
                        $.ajax({//请求检查该新增用户
                            url: checkUserInterface,
                            data: userJsonData,
                            contentType: 'application/json;charset=utf-8',
                            type: "POST",
                            beforeSend: function(XMLHttpRequest ) {
                                //在请求头部设置accessToken
                                XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
                            },
                            //请求成功后的回调函数
                            //result是请求成功后返回的Json结果
                            success: function (result) {
                                if (result.code == 200) {
                                    clearAllErrors();
                                } else {
                                    let errorMap = result.dataMap.fieldErrors;
                                    showAllErrors(errorMap);
                                }
                            },
                            error: function () {
                                alertUtil.message("服务器后端未响应!", "danger");
                            }
                        });
                    }

                    //修改用户的情况
                    if ($("#user_confirm").hasClass("user_update_confirm_btn")) {
                        $.ajax({//请求检查该更新用户
                            url: checkUserInterface,
                            data: userJsonData,
                            contentType: 'application/json;charset=utf-8',
                            type: "PUT",
                            beforeSend: function(XMLHttpRequest ) {
                                //在请求头部设置accessToken
                                XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
                            },
                            //请求成功后的回调函数
                            //result是请求成功后返回的Json结果
                            success: function (result) {
                                if (result.code == 200) {
                                    clearAllErrors();
                                } else {
                                    let errorMap = result.dataMap.fieldErrors;
                                    showAllErrors(errorMap);
                                }
                            },
                            error: function () {
                                alertUtil.message("服务器后端未响应!", "danger");
                            }
                        });
                    }

                });


        //绑定
        $(document).off("click", ".user_check_item").on("click", ".user_check_item", function () {

        });


        //绑定用户模态框的确认按钮的点击事件
        $("#user_confirm").off("click").click(function () {
            let userData = getModalData();
            let userJsonData = JSON.stringify(userData);

            //增加用户的情况
            if ($(this).hasClass("user_add_confirm_btn")) {
                $.ajax({//请求保存该用户
                    url: userWithRoleInterface,
                    data: userJsonData,
                    contentType: 'application/json;charset=utf-8',
                    type: "POST",
                    beforeSend: function(XMLHttpRequest ) {
                        //在请求头部设置accessToken
                        XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
                    },
                    //请求成功后的回调函数
                    //result是请求成功后返回的Json结果
                    success: function (result) {
                        if (result.code == 200) {
                            alertUtil.message(result.msg);
                            //关闭模态框
                            $('#user_modal').modal('hide');
                            //跳转到尾页
                            let finalPage = Math.ceil((totalRecords+1)/$("#user_curd_table").bootstrapTable('getOptions').pageSize);
                            let tableData = {};
                            tableData["total"] = totalRecords + 1;
                            tableData["totalNotFiltered"] = totalRecords + 1;
                            //刷新表格数据数
                            $("#user_curd_table").bootstrapTable('load', tableData);
                            $("#user_curd_table").bootstrapTable('selectPage', finalPage);
                        } else {
                            let errorMap = result.dataMap.fieldErrors;
                            showAllErrors(errorMap);
                            alertUtil.message(result.msg, "danger");
                        }
                    },
                    error: function () {
                        alertUtil.message("服务器后端未响应!", "danger");
                    }
                });
            }

            //修改用户的情况
            if ($(this).hasClass("user_update_confirm_btn")) {
                $.ajax({//请求修改该用户
                    url: userWithRoleInterface,
                    data: userJsonData,
                    contentType: 'application/json;charset=utf-8',
                    type: "PUT",
                    beforeSend: function(XMLHttpRequest ) {
                        //在请求头部设置accessToken
                        XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
                    },
                    //请求成功后的回调函数
                    //result是请求成功后返回的Json结果
                    success: function (result) {
                        if (result.code == 200) {
                            alertUtil.message(result.msg);
                            //关闭模态框
                            $('#user_modal').modal('hide');
                            //跳转到当前页
                            to_page(nowPage);
                        } else {
                            let errorMap = result.dataMap.fieldErrors;
                            showAllErrors(errorMap);
                            alertUtil.message(result.msg, "danger");
                        }
                    },
                    error: function () {
                        alertUtil.message("服务器后端未响应!", "danger");
                    }
                });
            }

        });

        //每行用户编辑按钮的事件
        $(document).off("click", ".update_user_btn").on("click", ".update_user_btn", function () {
            //清除所有错误
            clearAllErrors();
            //去掉标识用的类，再增加标识用的类
            $("#user_confirm").removeClass("user_add_confirm_btn user_update_confirm_btn").addClass("user_update_confirm_btn");
            //提示编辑用户信息
            $("#user_modal .modal-title").empty().text("编辑用户信息");
            //将用户名那一项禁用
            $("#user_modal input[name='username']").attr("disabled","");

            let userData = getThisRowJsonData(this);
            loadModalData(userData);

            $('#user_modal').modal({
                show: true,
                backdrop: 'static'
            });
        });

        //单行删除按钮的点击事件
        $(document).off("click", ".delete_user_btn").on("click", ".delete_user_btn", function () {

            let userJsonObject = getThisRowJsonData(this);
            // let userID = $(this).parents("tr").find("td:eq(1)").text();
            // let username = $(this).parents("tr").find("td:eq(2)").text();
            let userID = userJsonObject["id"];
            let username = userJsonObject["username"];
            $("#delete_id_p").empty().text(userID);//添加删除的id
            $("#delete_tip_p").empty()
                .append("确认删除用户<strong>[" + username + "]</strong>吗？<strong>注意，此操作不可逆！</strong>");//添加删除的提示
            //alertUtil.message("确认删除id为" + roleID + "的角色吗？", "warning");

            $("#delete_modal").modal({//弹出模态框
                backdrop: "static"
            });
        });

        //多选删除按钮
        $("#multiple_delete_btn").off("click").click(function () {
            //在选中项目数量大于0时才能弹出模态框
            if (selectedObjects.length > 0) {
                let objectIds = getAttributeArray(selectedObjects, "id");
                let objectNames = getAttributeArray(selectedObjects, "username");

                $("#delete_id_p").empty();//添加id前先清空
                $("#delete_id_p").text(objectIds.join(","));//添加删除的id
                $("#delete_tip_p").empty();//添加提示前先清空
                $("#delete_tip_p").append("确认删除用户<strong>[" + objectNames.join(",") + "]</strong>吗？<br><strong>注意，此操作不可逆！</strong>");//添加删除的提示

                $("#delete_modal").modal({//弹出模态框
                    backdrop: "static"
                });
            } else {//否则提示
                alertUtil.message("警告! 尚未选中任何用户!", "warning");
            }
        });

        //确认删除按钮的点击事件
        $("#delete_user_btn").off("click").click(function () {
            let idListString = $("#delete_id_p").text();//找到要删除的id列表字符串

            $.ajax({//请求删除该用户
                url: userWithRoleInterface + "?idList=" + idListString,
                type: "DELETE",
                beforeSend: function(XMLHttpRequest ) {
                    //在请求头部设置accessToken
                    XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
                },
                //请求成功后的回调函数
                //result是请求成功后返回的Json结果
                success: function (result) {
                    if (result.code == 200) {
                        alertUtil.message(result.msg);
                    } else {
                        alertUtil.message(result.msg, "danger");
                    }
                    $("#delete_modal").modal('hide');//关闭删除模态框

                    let deletedObjects = [];//要删除的职位数组
                    idListString.split(",").forEach((item) => {
                        let intId = parseInt(item);
                        deletedObjects.push({'id': intId});
                    })
                    //已选择的项目去除已删除的部分(求差集)
                    selectedObjects = difference(selectedObjects, deletedObjects);

                    to_page(nowPage);//跳转到当前页(刷新)
                },
                error: function () {
                    $("#delete_modal").modal('hide');//关闭删除模态框
                    alertUtil.message("服务器后端未响应!", "danger");
                }
            });
        });

        //page-change.bs.table是bootstrap-table在改变页数时会触发的事件
        $(document).off("page-change.bs.table").on("page-change.bs.table", function (e, number, size) {
            nowPage = number;
            // let pageNum = $(".page-item.active").text();
            // alertUtil.message("页数发生改变，获取到的页数为：" + number, "info");
            to_page(number);
        });

        bindOnEvent_finish = true;
    }

</script>

